<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head th:replace="/user/common/CSSandJS1 :: head('购物车')"></head>

<body>

<!--wrapper start-->
<div th:replace="/user/common/CSSandJS1 :: js"></div>

<div class="wrapper">
<!--== Start Preloader Content ==-->

  <div class="preloader-wrap">
    <div class="preloader">
      <span class="dot"></span>
      <div class="dots">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </div>
  <!--== End Preloader Content ==-->

  <!--== Start Header Wrapper ==-->
  <div th:replace="/user/common/header :: header(${cartList}, ${totalMoney})"></div>
  <!--== End Header Wrapper ==-->

  <main class="main-content">
    <!--== Start Page Header Area Wrapper ==-->
    <div class="page-header-area">
      <div class="container">
        <div class="row">
          <div class="col-12 text-center">
            <div class="page-header-content">
              <h4 class="title mt-0">Your Shopping Cart</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--== End Page Header Area Wrapper ==-->

    <!--== Start Product Area Wrapper ==-->
    <section class="product-area shopping-cart-area">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="shopping-cart-wrap">
              <div class="cart-table table-responsive">
                <table class="table">
                  <thead>
                  <tr>
                    <th class="indecor-product-remove">删除</th>
                    <th class="indecor-product-thumbnail">图片</th>
                    <th class="indecor-product-name">名字</th>
                    <th class="indecor-product-price">价格</th>
                    <th class="indecor-product-quantity">数量</th>
                    <th class="indecor-product-subtotal">总计</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr th:each="cart:${cartList}">
                    <td class="indecor-product-remove">
                      <a th:href="@{|/tCart/deleteCart?id=${cart.id}|}"><i class="fa fa-times"></i></a>
                    </td>
                    <td class="indecor-product-thumbnail">
                      <!--                        @{cart.tProduct.photo}-->
                      <a th:href="@{#/}"><img th:src="@{${cart.tProduct.photo}}" alt="Image-HasTech"></a>
                    </td>
                    <td class="indecor-product-name">
                      <h4 class="title"><a href="single-product.html">[[${cart.tProduct.title}]]</a></h4>
                    </td>
                    <td class="indecor-product-price"><span class="price" th:text="|¥${#numbers.formatDecimal(cart.tProduct.price * cart.tProduct.discount,0,2)}|">$70.00</span></td>
                    <td class="indecor-product-quantity">
                      <div class="pro-qty">
                        <input type="text" id="quantity" title="Quantity" th:value="${cart.count}">
                      </div>
                    </td>
                    <td class="product-subtotal">
                      <span class="price"  th:text="|¥${#numbers.formatDecimal(cart.tProduct.price * cart.count, 0, 2)}|">$70.00</span>
                    </td>
                  </tr>

                  </tbody>
                </table>
              </div>
              <div class="row">
                <div class="col-md-12 col-lg-7 col-12">
                  <div class="coupon-all">
                    <div class="coupon">
                      <a class="button" th:href="@{/index}">继续购物</a>
                      <a class="button" href="#/">清空购物车</a>
                      <div class="cart-coupon">
                        <h3>Special instructions for seller</h3>
                        <label for="Textarea1" class="form-label visually-hidden">Instructions Seller</label>
                        <textarea class="form-control" id="Textarea1"></textarea>
                      </div>
                    </div>
                    <div class="coupon2">
                      <a class="button" href="#/">Update Cart</a>
                    </div>
                  </div>
                </div>
                <div class="col-md-12 col-lg-5 col-12">
                  <div class="cart-page-total">
                    <h3>Cart Totals</h3>
                    <ul>
                      <li>总金额<span class="money">[[${totalMoney}]] 元</span></li>
                      <li>总件数<span class="money">[[${totalCount}]] 件</span></li>
                    </ul>
                    <a class="proceed-to-checkout-btn" th:href="@{/checkout}">Proceed to Checkout</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!--== End Product Area Wrapper ==-->
  </main>

  <!--== Start Footer Area Wrapper ==-->
  <div th:replace="/user/common/footer :: footer"></div>
  <!--== End Footer Area Wrapper ==-->

  <!--== Scroll Top Button ==-->
  <div id="scroll-to-top" class="scroll-to-top"><span class="fa fa-angle-double-up"></span></div>

  <!--== Start Quick View Menu ==-->
  <div th:replace="/user/common/aside :: aside"></div>
  <!--== End Side Menu ==-->
</div>

<script>
  $(document).ready(function () {
      if([[${msg}]] === 'ok'){
        layer.msg('删除成功。')
      }else{
        layer.msg('删除失败！');
      }
  })
</script>
</body>

</html>